<!--#
layout("/layouts/store.html"){
#-->
<script src="${base!}/assets/platform/vendor/ueditor/ueditor.config.js"></script>
<script src="${base!}/assets/platform/vendor/ueditor/ueditor.all.js"></script>
<header class="header navbar bg-white shadow">
    <div class="btn-group tool-button">
        <a class="btn btn-primary navbar-btn" href="${base}/store/cms/article" data-pjax><i class="ti-angle-left"></i>${msg['globals.button.back']}</a>
    </div>
    <div class="pull-right">
        <div class="btn-group tool-button">
            <button class="btn btn-primary navbar-btn" type="button" id="save"> ${msg['globals.button.save']}</button>
        </div>
    </div>
</header>

<div class="content-wrap">
    <div class="wrapper mb15 mt10" style="min-height:500px;height: 100%;">
        <form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate
              action="${base}/store/cms/article/editDo" method="post">
                <input id="id" name="id" value="${obj.id!}" type="hidden">
                <input type="hidden" name="channelId" value="${obj.channelId!}">
                        <div class="col-lg-12">
<!--                            <div class="form-group has-feedback">-->
<!--                                <label for="channelId" class="col-sm-2 control-label">${msg['cms.article.column.classid']}</label>-->

<!--                                <div class="col-sm-8">-->
<!--                                    <div class="input-group">-->
<!--                                        <input id="channelId" type="text" class="form-control" placeholder="${msg['cms.article.column.selectclassid']}" disabled-->
<!--                                               data-parsley-required="true"-->
<!--                                               value="&lt;!&ndash;#if(!isEmpty(channel)){#&ndash;&gt;${channel.name}&lt;!&ndash;#}#&ndash;&gt;" />-->

<!--			                             		<span class="input-group-btn">-->
<!--			                             			<button type="button" class="btn btn-primary" data-toggle="modal"-->
<!--                                                            data-target="#dialogSelect"><i class="ti-plus"></i>${msg['cms.article.column.select']}-->
<!--                                                    </button>-->
<!--			                             		</span>-->
<!--                                    </div>-->
<!--                                    <input type="hidden" name="channelId" value="${obj.channelId!}">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="title" class="col-sm-2 control-label">${msg['cms.article.column.articletitle']}</label>-->

<!--                                <div class="col-sm-8">-->
<!--                                    <input type="text" id="title" class="form-control" name="title" data-parsley-required="true"-->
<!--                                           data-parsley-required="true" value="${obj.title!}" placeholder="${msg['cms.article.column.articletitle']}">-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="form-group">
                                <label for="author" class="col-sm-2 control-label">客服电话</label>
                                <!--#if(isEmpty(obj.account_info)){#-->
                                <div class="col-sm-8">
                                    <input type="text" id="author" class="form-control"
                                           data-parsley-required="true" value="${obj.author!}" placeholder="${msg['cms.article.column.author']}">
                                </div>
                                <!--#}#-->
                                <!--#if(!isEmpty(obj.account_info)){#-->
                                <div class="col-sm-8">
                                    <input type="text" id="author" class="form-control"
                                           data-parsley-required="true" value="号码:${obj.mobile!} 昵称:${obj.account_info.nickname!}" placeholder="${msg['cms.article.column.author']}">
                                </div>
                                <!--#}#-->
                                <input name="author" type="hidden" value="${obj.author!}">
                            </div>
<!--                            <div class="form-group">-->
<!--                                <label for="info" class="col-sm-2 control-label">${msg['cms.article.column.introduction']}</label>-->

<!--                                <div class="col-sm-8">-->
<!--                                    <textarea id="info" name="info" class="form-control" style="width:100%;height:80px;">${obj.info!}</textarea>-->
<!--                                </div>-->
<!--                            </div>-->
                            <!--发布时间-->
                            <!--<div class="form-group">-->
                                <!--<label for="at" class="col-sm-2 control-label">${msg['cms.article.column.releasetime']}</label>-->

                                <!--<div class="col-sm-8 input-group date form_datetime " style="padding-left: 16px;padding-right: 16px;" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="at">-->
                                    <!--<input type="text" size="16" readonly class="form-control" value="${@date.getDate(obj.publishAt)}" data-parsley-required="true">-->
                                    <!--<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>-->
                                    <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
                                <!--</div>-->
                                <!--<input type="hidden" id="at" name="at" value="${@date.getDate(obj.publishAt)}" />-->
                            <!--</div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="disabled" class="col-sm-2 control-label">${msg['cms.article.column.cancelrelease']}</label>-->
<!--                                <div class="col-sm-8 switcha">-->
<!--                                    <div class="mr15">-->
<!--                                        <input type="checkbox" id="disabled" name="disabled" class="js-switch-blue" value="true" &lt;!&ndash;#if(obj.disabled){#&ndash;&gt;checked&lt;!&ndash;#}#&ndash;&gt;>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="form-group">
                                <label for="picurl" class="col-sm-2 control-label">客服二维码</label>

                                <div class="col-sm-6">
                                    <div id="queue"></div>
                                    <div>
                                        <input id="file_upload" name="file_upload" type="file" multiple="false">
                                    </div>
                                    <div id="img" style="padding: 5px;">
                                        <!--#if(!isEmpty(obj.picurl)){#-->
                                        <img src='${obj.picurl!}' style='width:150px;'>
                                        <i class="fa fa-close" onclick="$('#picurl').val('');$('#img').html('');"></i>
                                        <!--#}#-->
                                    </div>
                                    <input type="hidden" id="picurl" name="picurl" value="${obj.picurl!}" >
                                </div>
<!--                                <div class="col-sm-2" style="color: red;">建议尺寸：150*150</div>-->
                            </div>
                            <!--#if(!isEmpty(obj.imageUrlStrs)){#-->
                            <div class="form-group">
                                <label for="content" class="col-sm-2 control-label">用户上传创意图片</label>
                                <div class="col-sm-8">
                                    <div id="imageListStr">

                                    </div>
                                </div>
                            </div>
                            <!--#}#-->
                            <div class="form-group" style="display: none">
                                <label for="content" class="col-sm-2 control-label">${msg['cms.article.column.articlecontent']}</label>

                                <div class="col-sm-8">
                                    <textarea data-parsley-required="true" id="content" name="content" style="width:100%;height:200px;">${obj.content!}</textarea>
                                </div>
                            </div>
                        </div>
        </form>
    </div>
</div>
<div id="dialogSelect" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">${msg['cms.article.column.selectcolumn']}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div id="jsTree" class="demo"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">${msg['cms.article.column.cancel']}</button>
                <button type="button" class="btn btn-primary" onclick="select()">${msg['cms.article.column.selectok']}</button>
            </div>
        </div>
    </div>
</div>
<script language="JavaScript">
    function clearFile() {
        $("#img").html("");
        $("#queue").html("");
        $("#picurl").val("");
    }
    function initTreeView() {
        $("#jsTree").jstree({
            plugins: ["wholerow", "json_data"],
            core: {
                data: {
                    dataType: "json",
                    url: function (node) {
                        return node.id === "#" ? "${base}/store/cms/channel/tree" : "${base}/store/cms/channel/tree/" + node.id
                    }
                },
                multiple: false
            }
        }).on("dblclick.jstree", function (node) {
            select();
        });
    }
    //选择父菜单
    function select() {
        var tree = $.jstree.reference("#jsTree");
        var node = tree.get_selected(true);
        $("#addForm #channelId").val(node[0].text);
        $("#addForm input[name='channelId']").val(node[0].id);
        $("#dialogSelect").modal("hide");
    }
    var ue;
    $(document).ready(function () {
        setTimeout(function () {
            ue= new baidu.editor.ui.Editor();
            ue.render('content');
        },500);
        myForm.init();
        $('.form_datetime').datetimepicker({
            language:  'zh-CN',
            format:'yyyy-mm-dd hh:ii:ss',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        initTreeView();
        $('#file_upload').uploadifive({
            'auto': true,
            'multi': false,
            'width': '100%',
            'height': '35',
            'buttonText': '${msg['cms.article.column.selectpicture']}',
            'fileType': 'image/jpg,image/jpeg,image/png',
            'fileSizeLimit': 1024,
            'queueSizeLimit': 1,
            'formData': {},
            'queueID': 'queue',
            'uploadScript': '${base}/open/file/upload/image',
            'onUploadComplete': function (file, data) {
                data = JSON.parse(data);
                if (data.code == 0) {
                    Toast.success(data.msg);
                    $("#img").html("<img src='" + data.data + "' style='width:150px;height:95px;'>");
                    $("#picurl").val(data.data);
                } else {
                    clearFile();
                    Toast.error(data.msg);
                }
            },
            'onDrop': function (file, fileDropCount) {
                clearFile();
            },
            'onClearQueue': function (queue) {
                clearFile();
            },
            'onCancel': function () {
                clearFile();
            }
        });
        $("#save").on("click",function(){
        	$('#addForm').submit();
        });
        $('#addForm').ajaxForm({
            dataType: 'json',
            beforeSubmit: function (arr, form, options) {
                sublime.showLoadingbar($(".main-content"));
            },
            success: function (data, statusText, xhr, form) {
                if (data.code == 0) {
                    // Toast.success(data.msg);
                    window.location.href="${base}/store/cms/article";
                } else {
                    Toast.error(data.msg);
                }
                sublime.closeLoadingbar($(".main-content"));
            }
        });

    });

    var srcList = '${srcList!}';
    if(srcList!='') {
        var imageList = srcList.split(",");
        var mtml = '';
            $.each(imageList, function (index, d) {
            mtml = mtml + '<img src="'+d+'" style="width: 200px;height: 150px;margin: 5px;"/>';
        })
        $("#imageListStr").html(mtml);
    }


</script>


<!--#}#-->